
import Vue from 'vue'
import store from "@/store";

// 指令: 
// 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

// 指令的常见写法
// v-指令名称 = "指令值"    v-if v-show
// v-指令名称:参数 = "指令值"    v-bind:class="指令值"
// v-指令名称:参数.修饰符.修饰符 = "指令值"    v-on:click.stop="函数"

// 自定义指令 => 用户按照自己的需求自定义指令

// 语法: 
// Vue.directive(指令名称,{
//     // // 当被绑定的元素插入到 DOM 中时……
//     inserted:function(el,binding){  //指令触发时的回调函数
//         // el -> 使用指令的元素
//         // binding  -> 指令携带的数据(指令值,指令参数,指令修饰符)
//     }
// })




// v-color:text="'red'"
// v-color:background="'red'"
// v-color:border="'red'"
// Vue.directive('color',{
//     inserted:function(el,binding){
//         console.log("v-color执行了",el);
//         console.log("v-color执行了",binding);
//         console.log("v-color执行了",binding.arg);

//         var {arg,value} = binding;

//         switch(arg){
//             case "text": el.style.color = value; break;
//             case "background": el.style.backgroundColor = value; break;
//             case "border": el.style.borderColor = value; break;
//         }

//     },
//     update:function(el,binding){
//         console.log("v-color执行了",el);
//         console.log("v-color执行了",binding);
//         console.log("v-color执行了",binding.arg);

//         var {arg,value} = binding;

//         switch(arg){
//             case "text": el.style.color = value; break;
//             case "background": el.style.backgroundColor = value; break;
//             case "border": el.style.borderColor = value; break;
//         }

//     }
// })


// 默认 bind 和update时执行
Vue.directive('color', function (el, binding) {
    // console.log("v-color执行了",el);
    // console.log("v-color执行了",binding);
    // console.log("v-color执行了",binding.arg);

    var { arg, value } = binding;

    switch (arg) {
        case "text": el.style.color = value; break;
        case "background": el.style.backgroundColor = value; break;
        case "border": el.style.borderColor = value; break;
    }

})

// role= 1 2 3 
// v-authority = 'role'  => 每次传参还要获取role  => 麻烦

// 参数  -> 如果不是要求的权限 -> 删除元素或禁用元素
// v-authority:remove       删除元素
// v-authority:disabled     禁用元素

// 修饰符 -> 
// v-authority:remove.superAdmin    超级管理员  => 只有超级管理员才能显示,否则就删除
// v-authority:remove.normalAdmin   普通管理员  => 只有普通管理员才能显示,否则就删除
// v-authority:remove.admin         管理员      => 只有管理员才能显示,否则就删除 

// console.dir(Vue);

Vue.directive("authority", function (el, binding) {
    console.log("v-authority执行了", el);
    console.log("v-authority执行了", binding);
    console.log("v-authority执行了", binding.arg);

    var role = store.state.authority.role;

    var { arg, modifiers } = binding;
    var { superAdmin, admin } = modifiers;
    // admin
    console.log("role", role, superAdmin);

    // 构造函数Vue的nextTick
    Vue.nextTick(() => {
        if (superAdmin) { // 只有超级管理员才能显示
            if (role != 1) { // 你不是超级管理员
                switch (arg) {
                    case "remove":
                        console.log("删除元素", el.remove);
                        el.remove();  
                        break;
                    case "disabled":
                        el.disabled = true;
                        el.classList.add("is-disabled");
                        break;
                }
            }
        }else if(admin){  //只有管理员可以访问
            if(!(role==1||role==2)){  // 但是你不是管理员
                switch (arg) {
                    case "remove":
                        console.log("删除元素", el.remove);
                        el.remove();  
                        break;
                    case "disabled":
                        el.disabled = true;
                        el.classList.add("is-disabled");
                        break;
                }
            }
        }else{  // 普通用户
            switch (arg) {
                case "remove":
                    console.log("删除元素", el.remove);
                    el.remove();  
                    break;
                case "disabled":
                    el.disabled = true;
                    el.classList.add("is-disabled");
                    break;
            }
        }
    })





})